<template>
	<view>
		<!-- 搜索 -->
		<view class="search">
			<view class="search-main">
				<input class="search-input" type="text" v-model="search" placeholder="搜索酒类" />
				<view class="search-content"><image src="../../static/imgs/search.png"></image></view>
			</view>
		</view>

		<view class="view-lint"></view>

		<view @touchend="touchend">
			<view class="u-flex u-col-top">
				<scroll-view class="scroll-view-left" scroll-y :scroll-with-animation="true" :scroll-top="scrollTop">
					<block v-for="(item, index) in primaryItemData" :key="index">
						<view class="list-col-left" :class="tagIndex == index ? 'active' : ''" @tap="btn(index)">{{ item.name }}</view>
					</block>
				</scroll-view>

				<scroll-view class="scroll-view-right sur-content" scroll-y :scroll-with-animation="true" :scroll-top="scrollTopRg" @scroll="scrollRight">
					<block v-for="(item, index) in primaryItemData" :key="index">
						<view class="list-col-right">
							<view>{{ item.name }}</view>

							<view class="liquor">
								<view class="liquor-li flex" v-for="(item,index) in liquor" :key="index">
									<image :src="item.imgUrl"></image>
									<!-- 右边 -->
									<view class="liquor-r">
										<view class="liquor-name">{{item.name}}</view>
										<view class="liquor-price">￥{{item.price}}/瓶</view>
									
										<view class="change-count">
											<view class="subtract">-</view>
											<view class="item-count">{{item.count}}</view>
											<view class="add">+</view>
										</view>
										
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	
	
		<!-- footer -->
		<view class="footer flex">
			<view class="footer-car">
				<image  src="../../static/imgs/购物车.png"></image>
				<text class="count">{{count}}</text>
				<text>￥{{total}}</text>
			</view>
			
			
			<!-- span -->
			
			<!-- div -->
			<view class="footer-btn">
				购买
			</view>
		</view>
	
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '你好',
			primaryItemData: [{ name: '白酒' }, { name: '红酒' }, { name: '啤酒' }, { name: '饮料' }],
			scrollTop: 0,
			windowHeight: 0,
			scrollViewHeight: 0,
			tagIndex: 0,
			scrollRightTop: [],
			ind: 0,
			navHeight: 0,
			scrollTopRg: 0,
			show: true,
			// 总价
			total:200,
			// 数量
			count:0,
			
			// 白酒：
			liquor:[
				{
					"imgUrl":'../../static/imgs/2020-09-30 下午2.14.14.png',
					"name":'贵州茅台',
					"price":'100',
					"count":'1'
				},
				{
					"imgUrl":'../../static/imgs/2020-09-30 下午2.14.14.png',
					"name":'贵州茅台',
					"price":'100',
					"count":'1'
				},
				{
					"imgUrl":'../../static/imgs/2020-09-30 下午2.14.14.png',
					"name":'贵州茅台',
					"price":'100',
					"count":'1'
				},
				{
					"imgUrl":'../../static/imgs/2020-09-30 下午2.14.14.png',
					"name":'贵州茅台',
					"price":'100',
					"count":'1'
				}
			]
			
		};
	},
	onLoad() {
		let that = this;
		uni.getSystemInfo({
			success(res) {
				that.windowHeight = res.windowHeight;
			}
		});
	},
	onShow() {
		let that = this;
		let info = uni.createSelectorQuery();
		let query = uni.createSelectorQuery();
		let navHeight = uni.createSelectorQuery();
		// 在电脑上运行测试加了setTimeout  小程序中不需要 理论上H5也不需要加setTimeout
		setTimeout(() => {
			// 获取左边每个scroll-view的高度
			info
				.select('.scroll-view-left')
				.boundingClientRect(function(data) {
					that.scrollViewHeight = data.height;
				})
				.exec();
			navHeight
				.select('.navbar-zz')
				.boundingClientRect(function(data) {
					that.navHeight = data.height;
				})
				.exec();
			// 获取右边scroll-view每个内容里顶部的距离
			query.selectAll('.list-col-right').boundingClientRect();
			query.exec(function(res) {
				for (var i = 0; i < that.primaryItemData.length; i++) {
					// 放入到一个数组内
					that.scrollRightTop.push(res[0][i].top);
				}
			});
		}, 1000);
	},
	methods: {
		// 左边点击事件 滚动
		btn(index) {
			let that = this;
			let query = uni.createSelectorQuery();
			query.selectAll('.list-col-left').boundingClientRect();
			query.exec(function(res) {
				let scrollTop = res[0][index].top;
				if (that.tagIndex != 0 && that.tagIndex > index) {
					that.scrollTop = res[0][index].height * index - (that.tagIndex - index) * res[0][index].height;
				} else {
					that.scrollTop = res[0][index].height * index;
				}
				// 右边滚动到相应位置
				if (that.show) {
					that.scrollTopRg = that.scrollRightTop[index] - that.navHeight;
				}
				// 记录是否往会滚的索引
				that.tagIndex = index;
			});
		},
		// 右边滚动事件
		scrollRight(event) {
			let that = this;
			that.show = false;
			// that.scrollTopRg = Math.random();
			// 滚动的时候取消右边滚动scrollTopRg
			let scrollTop = event.detail.scrollTop;
			// 左边相应的滚动方法
			let index = that.scrollRightTop.findIndex((item, index) => {
				return scrollTop + that.navHeight >= that.scrollRightTop[index] && scrollTop + that.navHeight < that.scrollRightTop[index + 1];
			});
			index > 0 ? that.btn(index) : that.btn(0);
		},
		touchend() {
			this.show = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.view-lint {
	margin: 30rpx 0;
	border: 1rpx solid #f7f4fa;
}
.flex{
	display: flex;
}
.flex-align-items{
	align-items: center;
}

.sur-content{
	padding: 0 40rpx;
	box-sizing: border-box;
}

//搜索
.search {
	padding: 0 40rpx;
	// margin: 20rpx 0;
	box-sizing: border-box;
	height: 60rpx;
	margin-bottom: 50rpx;
	.search-main {
		height: 100%;
		width: 100%;
		background-color: #efefef;
		border-radius: 30rpx;
		position: relative;
		display: flex;
		align-items: center;
		.search-input {
			padding: 10rpx 0 10rpx 70rpx;
		}
		.search-content {
			position: absolute;
			top: 10rpx;
			left: 20rpx;
			image {
				width: 34rpx;
				height: 34rpx;
				vertical-align: middle;
			}
		}
	}
}

.u-flex {
	display: flex;
}
.list-col-left {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.scroll-view-left {
	width: 25%;
	height: 100vh;
	background-color: #efefef;
}

.active {
	color: #000;
	width: 100%;
	height: 90rpx;
	background-color: #fff;
}

.scroll-view-right {
	width: 75%;
	height: 80vh;
}

.list-col-right {
	height: 100%;
}


// 白酒
.liquor{
	height: 100%;
	.liquor-li{
		margin: 20rpx 0rpx 20rpx 20rpx;
		image{
			width: 190rpx;
			height: 190rpx;
			margin-right: 20rpx;
		}
		.liquor-r{
			.liquor-name{
				line-height: 2;
				font-size: 36rpx;
			}
			.liquor-price{
				line-height: 1.5;
				font-size: 30rpx;
				color: #fa5700;
			}
		}
	}
	
	
	
	// 购物车计算数量
.change-count{
	width: 100%;
	padding: 0 40rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
		margin-top: 30rpx;
	.subtract,.add{
	
		width: 40rpx;
		height: 40rpx;
		line-height:40rpx ;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border: 1px solid #999;
		color: #000;
		font-size: 38rpx;
	}
	.add{
		background-color: #f95900;
		border: 1px solid #f95900;
		color: #fff;
	}
	.item-count{
		margin: 0 30rpx;
	}
}

}




// footer
.footer{
	background-color: #fff;
	z-index: 999;
	width: 100%;
	height: 98rpx;
	border-top: 1rpx solid #efefef;
	padding: 0  0 0 40rpx;
	box-sizing: border-box;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	.footer-car{
		position: relative;
		flex:3;
		image{
			width: 140rpx;
			height: 90rpx;
			// 图片与文字局中-垂直局中
			vertical-align: middle;
			margin-right: 30rpx;
			
		}
		.count{
			position: absolute;
			top: 0;
			left: 120rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: #fb4400;
			color: #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.footer-btn{
		flex:2;
		height: 100%;
		background-color: #fb3d00;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
	}
}
</style>
